<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo-13-收集表单数据</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- 收集表单数据:
        若: <input type="text"> 则 v-model 收集的是 value 值, 用户输入的就是 value 值
        若: <input type="radio"> 则 v-model 收集的是 value 值, 则要给 input 配置 value 值
        若: <input type="checkbox">
        1.没有配置 input 的 value 属性, 那么收集的就是 checked (true or false)
        2.配置 input 的 value 属性:
            (1)v-model 的初始值是非数组, 那么收集的就是 checked (true or false)
            (2)v-model 的初始值是数组, 那么收集的就是 value 组成的数组
        备注: v-model 的三个修饰符:
            lazy: 失去焦点后在收集数据
            number: 输入字符串转为数字
            trim: 输入首尾空格过滤 -->

    <form @submit.prevent="submitForm">
        账号: <input type="text" v-model.trim="account">
        <br><br>

        密码: <input type="password" v-model.number="password">
        <br><br>

        年龄: <input type="number" v-model="age">
        <br><br>

        性别:
        男<input type="radio" name="sex" v-model="sex" value="男">
        女<input type="radio" name="sex" v-model="sex" value="女">
        <br><br>

        爱好:
        学习<input type="checkbox" v-model="hobbys" value="study">
        玩电脑<input type="checkbox" v-model="hobbys" value="game">
        吃饭<input type="checkbox" v-model="hobbys" value="eat">
        <br><br>

        所属校区:
        <select v-model="city">
            <option>请选择校区</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="深圳">深圳</option>
            <option value="武汉">武汉</option>
        </select>
        <br><br>

        其他信息:<textarea v-model.lazy="other"></textarea>
        <br><br>

        <input type="checkbox" v-model="agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
        <br><br>

        <button>提交</button>
    </form>

</div>

<script text="text/javascript">
    const vm = new Vue({
        el: '#root',

        data: {
            account: '',
            password: '',
            age: 18,
            sex: '男',
            hobbys: [],
            city: '北京',
            other: '',
            agree: false,
        },

        methods: {
            submitForm() {
                console.log(JSON.stringify(this._data))
            }
        }
    })
</script>
</body>
</html>